<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
		<u-no-network @retry="init"></u-no-network>
		<shopro-empty v-if="!hasTemplate" :image="$IMG_URL + '/imgs/empty/template_empty.png'" tipText="暂未找到模板，请前往装修~"></shopro-empty>
		<view v-else-if="isConnected && isRefresh" class="content-box">
			<!-- 导航栏 -->
			<home-head v-if="headSwiperList && headSwiperList.length" :isScorll="isScorll" borderRadius="0" :list="headSwiperList"></home-head>
			<!-- 自定义模块 -->
			<view class="template-box">
				<block v-for="(item, index) in homeTemplate" :key="item.id">
					<!-- 轮播 -->
					<sh-banner
						v-if="item.type === 'banner' && index !== 0"
						:Px="item.content.x"
						:Py="item.content.y"
						:borderRadius="item.content.radius"
						:height="item.content.height"
						:list="item.content.list"
					></sh-banner>
					<!-- 搜索 -->
					<!-- <sh-search v-if="item.type === 'search'"></sh-search> -->
				</block>
			</view>
		</view>
		<view class="padd-box">
			<view class="data-box flexWrap">
				<view class="data-item flexWarpCenterColumn">
					<view>{{userInfo.money||0}}</view>
					<view class="data-title">收益余额</view>
				</view>
				<view class="data-item flexWarpCenterColumn">
					<view>{{userInfo.score||0}}</view>
					<view class="data-title">积分余额</view>
				</view>
				<view class="data-item flexWarpCenterColumn">
					<view>{{userInfo.volume_num||0}}</view>
					<view class="data-title">抵扣券余张</view>
				</view>
				<view class="data-item flexWarpCenterColumn">
					<view>{{userInfo.travel_num||0}}</view>
					<view class="data-title">旅游余次</view>
				</view>
			</view>
			<block v-for="(item, index) in homeTemplate" :key="item.id">
				<!-- 滑动宫格 -->
				<sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list" :oneRowNum="item.content.style"></sh-grid-swiper>
			</block>
			<view class="notice-box">
				<uni-notice-bar show-icon scrollable :text="note" v-if="note" :speed='50' color="#5D5D5D" :fontSize="11" background-color="#fff"/>
			</view>
			<view class="ad-box">
				<image src="../../static/images/home/ad-img.png"></image>
			</view>
			<view class="travel-box">
				<view class="travel-top flexWrap">
					<view class="travel-title">热门免费旅游</view>
					<view>点击查看更多</view>
				</view>
				<view class="travel-cont">
					<view class="travel-item" v-for="item in 3">
						<view class="travel-img">
							<image src="../../static/images/home/travel-img.png"></image>
						</view>
						<view class="travel-info">
							<view class="travel-text">桂林全景5天4晚火车畅玩包吃住</view>
							<view class="price-box flexWrap">
								<view class="price">￥<text>0.01</text>元</view>
								<view class="sign-btn">立即报名</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="travel-box">
				<view class="travel-top flexWrap">
					<view class="travel-title">热门康养旅居</view>
					<view>点击查看更多</view>
				</view>
				<view class="travel-cont">
					<view class="travel-item" v-for="item in 3">
						<view class="travel-img">
							<image src="../../static/images/home/travel-img.png"></image>
						</view>
						<view class="travel-info">
							<view class="travel-text">海南海花岛30天免费康养旅居免房费</view>
							<view class="price-box flexWrap">
								<view class="flexWrapNo cost">
									仅收管理费
									<view class="price">￥<text>0.01</text>元</view>
								</view>
								<view class="sign-btn">立即报名</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="shop-box">
				<view class="nav-box flexWrap">
					<view class="nav-item flexWarpCenterColumn" :class="{active:navIndex==0}" @tap="changeNav(0)">
						<view>优惠商城</view>
						<view class="tips">可用抵扣券</view>
					</view>
					<view class="nav-line"></view>
					<view class="nav-item flexWarpCenterColumn" :class="{active:navIndex==1}" @tap="changeNav(1)">
						<view>积分商城</view>
						<view class="tips">可用积分免费兑换</view>
					</view>
				</view>
				<view class="shop-cont flexWrap">
					<view class="shop-item" v-for="item in 10">
						<view class="shop-img">
							<image src="../../static/images/home/shop-img.png"></image>
						</view>
						<view class="shop-name">茵葩兰韩国护肤品套装</view>
						<view class="tips">可用2张抵扣券</view>
						<view class="price-box flexWrap">
							<view class="price"><text>5899.00</text>元</view>
							<image src="../../static/images/home/cart-icon.png" class="cart-icon"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shAdv from './components/sh-adv.vue';
import shCoupon from './components/sh-coupon.vue';
import shSeckill from './components/sh-seckill.vue';
import shGroupon from './components/sh-groupon.vue';
import shRichtext from './components/sh-richtext.vue';
import shCell from './components/sh-cell.vue';
import shGrid from './components/sh-grid.vue';
import shTitleCard from './components/sh-title-card.vue';
import shOrderCard from './components/sh-order-card.vue';
import shWallet from './components/sh-wallet.vue';
import shSearch from './components/sh-search.vue';
import shCategoryTabs from './components/sh-category-tabs.vue';
import { mapMutations, mapActions, mapState } from 'vuex';

import privacyModal from './index/privacy-modal.vue';
import homeHead from './index/home-head.vue';

// #ifdef MP-WEIXIN
import { HAS_LIVE } from '@/env';
import shLive from './components/sh-live.vue';
// #endif

// #ifdef H5
let listenMove = document.body; //禁止手机h5下拉刷新带动整个页面。
let handle = function(e) {
	e.preventDefault();
};
// #endif

export default {
	components: {
		shBanner,
		shGridSwiper,
		shGroupon,
		shHotGoods,
		shAdv,
		shCoupon,
		shSeckill,
		shRichtext,
		shCell,
		shGrid,
		shTitleCard,
		shWallet,
		shOrderCard,
		shSearch,
		shCategoryTabs,

		privacyModal,
		homeHead,

		// #ifdef MP-WEIXIN
		shLive
		// #endif
	},
	data() {
		return {
			// #ifdef MP-WEIXIN
			HAS_LIVE: HAS_LIVE,
			// #endif
			isRefresh: true,
			enable: false, //是否开启吸顶。
			isConnected: true, //是否有网
			showPrivacy: false, //协议
			isScorll: false,
			navIndex:0,
			note:"所有商品均由正规旅行社提供服务。"
		};
	},
	computed: {
		...mapState({
			config: ({ shopro }) => shopro.config,
			shopInfo: ({ shopro }) => shopro.config?.shop,
			isLogin: ({ user }) => user.isLogin,
			homeTemplate: ({ shopro }) => shopro.template?.home,
			hasTemplate: ({ shopro }) => shopro.hasTemplate,
			userInfo: ({ shopro }) => shopro.config?.user
		}),
		// 项目标题
		appName() {
			if (this.config?.shop) {
				return this.config?.shop?.name;
			}
		},
		// 头部模块数据
		headSwiperList() {
			if (this.homeTemplate?.length) {
				return this.homeTemplate[0]?.content?.list;
			}
		},
		//分类选项卡数据
		categoryTabsData() {
			if (this.homeTemplate?.length) {
				return this.homeTemplate[this.homeTemplate.length - 1]?.content;
			}
		}
	},
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.isScorll = e.scrollTop > 100 ? true : false;
	},
	onShow() {
		let that = this;
		this.enable = true;
		this.isLogin && this.getCartList();
		// #ifdef APP-VUE
		// 网络变化检测
		uni.onNetworkStatusChange(res => {
			this.isConnected = res.isConnected;
		});
		uni.getNetworkType({
			success: res => {
				res.networkType == 'none' ? (this.isConnected = false) : (this.isConnected = true);
			}
		});
		// #endif
	},
	onHide() {
		this.enable = false;
	},
	onLoad() {
		// #ifdef APP-VUE
		// app隐私协议弹窗
		if (!plus.runtime.isAgreePrivacy()) {
			this.showPrivacy = true;
			this.showNoticeModal = false;
		}
		// #endif
	},
	methods: {
		...mapActions(['appInit', 'getTemplate', 'getCartList']),
		jweixin() {
			this.$wxsdk.openLocation();
		},
		// 初始化
		init() {
			this.isRefresh = false;
			return Promise.all([this.getTemplate()]).then(() => {
				uni.stopPullDownRefresh();
				this.isRefresh = true;
			});
		},
		changeNav(index){
			this.navIndex=index
		}
	}
};
</script>

<style lang="scss">
	.home-wrap{
		padding-bottom: 300upx;
	}
	image{
		width: 100%;
		height: 100%;
	}
	.padd-box{
		padding: 0 12upx;
		margin-top: -130upx;
	}
	.data-box{
		background:rgba(255, 255, 255, .8);
		border-radius: 10upx 10upx 0 0;
		position: relative;
		z-index: 999;
		padding: 28upx 50upx;
		.data-item{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			.data-title{
				font-family: Segoe UI, Segoe UI;
				font-weight: 400;
				font-size: 24rpx;
				color: #848484;
			}
		}
	}
	.notice-box{
		margin-top: 15upx;
	}
	.ad-box{
		height: 190upx;
	}
	.travel-box{
		margin-top: 60upx;
		.travel-top{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #666666;
			.travel-title{
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #000000;
			}
		}
		.travel-cont{
			margin-top: 8upx;
			.travel-item{
				border-radius: 10upx;
				background: #fff;
				margin-bottom: 22upx;
				.travel-img{
					height: 408upx;
					border-radius: 10upx;
					overflow: hidden;
				}
				.travel-info{
					padding: 18upx 13upx;
					.travel-text{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #000000;
						@include ellipsis(1);
					}
					.price-box{
						margin-top: 12upx;
						.cost{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #878787;
							align-items: baseline;
						}
						.price{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FF0000;
							text{
								font-size: 48upx;
							}
						}
						.sign-btn{
							width: 186rpx;
							height: 64rpx;
							line-height: 64rpx;
							text-align: center;
							background: #147F00;
							border-radius: 116rpx 116rpx 116rpx 116rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 32rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
	.shop-box{
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 40upx;
		padding: 0 12upx;
		padding-bottom: 24upx;
		.nav-box{
			padding: 30upx 98upx;
			.nav-item{
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #000000;
				.tips{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #878787;
				}
			}
			.active{
				color: #FF0000;
			}
			.nav-line{
				width: 1rpx;
				height: 52rpx;
				background-color: #C1C1C1;
			}
		}
		.shop-cont{
			flex-wrap: wrap;
			.shop-item{
				width: 340upx;
				margin-bottom: 37upx;
				.shop-img{
					height: 338upx;
					border-radius: 10upx;
					overflow: hidden;
				}
				.shop-name{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #878787;
					margin: 10upx 0;
					@include ellipsis(1);
				}
				.tips{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #F83A3A;
				}
				.price-box{
					.price{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF0000;
						text{
							font-size: 48upx;
						}
					}
					.cart-icon{
						width: 54upx;
						height: 54upx;
					}
				}
			}
		}
	}
</style>
